<template>
  

     <div style="margin: 10px 0">
      <el-input style="width: 200px; height: 30px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入用户名" v-model="username"></el-input>
      <el-button class="ml-5" type="primary" @click="load" style="height: 25px;">搜索</el-button>
      <el-button type="warning" @click="reset" style="height:25px">重置</el-button>
    </div>

    <div style="margin: 15px 0">
      <el-button plain class="ml-5" type="warning" @click="selectState(1)" style="height: 25px;"> 
        待审核<el-icon style="margin-left: 5px;"><WarningFilled /></el-icon>
      </el-button>

      <el-button plain class="ml-5" type="success"  @click="selectState(2)" style="height: 25px;"> 
        审核通过<el-icon style="margin-left: 5px;"><SuccessFilled /></el-icon>
      </el-button>

      <el-button plain class="ml-5" type="danger"  @click="selectState(3)" style="height: 25px;"> 
        审核失败<el-icon style="margin-left: 5px;"><CircleCloseFilled /></el-icon>
      </el-button>
    </div>


    <template>
  
</template>

<el-card style="max-width: 100%; margin-bottom: 10px;" v-for="item in tableData">
  <div>
        <img src="../assets/admin.jpg" alt="" style="height: 40px; border-radius: 50%; margin-right: 10px">
        <span> {{ item.realname }} </span>
        <span style="color: #20B2AA">
          提交了碳行者申请
        </span>
        <el-tag v-if="item.isAccess == 1" type="warning">待审核</el-tag>
        <el-tag v-if="item.isAccess == 2" type="success">审核通过</el-tag>
        <el-tag v-if="item.isAccess == 3" type="danger">审核失败</el-tag>
        <el-button type="success" style="height: 25px; float: right;" @click="selectDetail(item)">查看</el-button>
  </div>

</el-card>

<el-dialog title="审核信息表" v-model="dialogFormVisible" width="30%">
      
    <img src="../assets/admin.jpg" alt="" style="height: 40px; border-radius: 50%;">
    <span> 用户名 </span>
    <el-tag type="warning" v-if="form.isAccess == 1">待审核</el-tag>
    <el-tag type="success" v-if="form.isAccess == 2">审核通过</el-tag>
    <el-tag type="danger" v-if="form.isAccess == 3">审核失败</el-tag>
    <el-form style="margin-top: 20px;" size="default" label-width="100px">
      <el-form-item label="真实姓名">
        <el-input style="width: 300px;" disabled v-model="form.realname"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input style="width: 300px;" disabled v-model="form.idCard"></el-input>
      </el-form-item>
      
      <el-form-item label="性别">
      <el-radio-group v-model="radio" disabled>
        <el-radio value="男">男</el-radio>
        <el-radio value="女">女</el-radio>
      </el-radio-group>
    </el-form-item>

      <el-form-item label="年龄">
        <el-input style="width: 300px;" disabled v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input style="width: 300px;" disabled v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input style="width: 300px;" disabled v-model="form.address"></el-input>
      </el-form-item>
    </el-form>

  
      <template #footer>
      <div class="dialog-footer">
        <el-button style="height: 30px;" @click="dialogFormVisible = false">取消</el-button>
        <el-button style="height: 30px" type="primary" @click=access v-if="form.isAccess == 1">审核</el-button>
        <el-button style="height: 30px" type="primary" @click=access v-if="form.isAccess == 2">撤销</el-button>
        <el-button style="height: 30px" type="primary" @click=access v-if="form.isAccess == 3">撤销</el-button>
      </div>
    </template>
    </el-dialog>


    <el-dialog
    v-model="centerDialogVisible"
    title="审核"
    width="500"
    align-center
  >
    <span v-if="form.isAccess == 1">请检验碳行者申请信息</span>
    <span v-if="form.isAccess != 1">你确定要撤销吗?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelCheck">取消</el-button>
        <el-button type="primary" @click="accessApply" v-if="form.isAccess != 1">
          确定
        </el-button>
        <el-button type="primary" @click="accessApply" v-if="form.isAccess == 1">
          批准
        </el-button>
        <el-button type="danger" @click="notAccessApply" v-if="form.isAccess == 1">
          驳回
        </el-button>
      </div>
    </template>
  </el-dialog>    

  <template v-if="tableData.length == 0">
  <el-empty description="没有数据了" />
</template>

    <div style="margin: 20px 10px;">
      <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[2, 3, 4]"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
</template>

<script setup lang="ts">
  import {onMounted, ref} from 'vue'
  import instance from '@/utils/request'
import { ElMessage } from 'element-plus';
 

  const tableData = ref([])
  const pageNum = ref(1)
  const pageSize = ref(5)
  const total = ref(100)
  const username = ref('')
  const checkState = ref(1)
  const dialogFormVisible = ref(false)
  const form = ref({})
  const radio = ref('')
  const centerDialogVisible = ref(false)

  onMounted(() => {
    load()
  })


  const load = async () => {
    const res = await instance.get('/admin/carbonerPage', {
      params: {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        realName: username.value,
        checkState: checkState.value
      }
    })
    tableData.value = res.data.data.records
    total.value = res.data.data.total
  }

  const handleSizeChange = (value: number) => {
    pageSize.value = value
    load()
  }
  

  const handleCurrentChange = (value: number) => {
    pageNum.value = value
    load()
  }

  const selectState = (value: number) => {
    checkState.value = value
    load()
  }
  const reset = () => {
    username.value = ''
    load()
  }

  const selectDetail = (value: any) => {
    dialogFormVisible.value = true
    form.value = value
    radio.value = form.value.sex
  }

  const access = (value: any) => {
    centerDialogVisible.value = true    
  }

  const dealApply = async (value: any) => {
    if(value == 1){
       const res = await instance.get('/admin/applyAccess?cid=' + form.value.cid)
       if(res.data.code == '200'){
          ElMessage({
            message: res.data.msg,
            type: 'success'
          })
       }
    }else{
      const res = await instance.get('/admin/cancelCarbonAccess?cid=' + form.value.cid)
      if(res.data.code == '200'){
        ElMessage({
          message: res.data.msg,
          type: 'success'
        })
      }
    }
    centerDialogVisible.value = false
    dialogFormVisible.value = false
    load()

  }


  const cancelCheck = () => {
      centerDialogVisible.value = false
      dialogFormVisible.value = false
    }

  const accessApply = () => {
    dealApply(form.value.isAccess)
  }

  const notAccessApply = async () => {
    const res = await instance.get('/admin/rejectCarbonerApply?cid=' + form.value.cid)
    if(res.data.code == '200'){
      ElMessage({
          message: res.data.msg,
          type: 'success'
        })
        centerDialogVisible.value = false
        dialogFormVisible.value = false
        load()
    }
  }

</script>

<style lang="scss">

</style>